<template>
	<view class="card" :style="{'--color': color}">
		<view class="d-flex j-sb">
			<view class="size32 color_33 f-shrink-0">送达时间</view>
			<view class="d-flex a-center" @click="show = true">
				<text class="size30 color_33 p-right20" v-if="deliveryTime">{{ deliveryTime }}</text>
				<text class="size32 color_99 p-right20" v-else>请选择送达时间</text>
				<text class="iconfont icon-xiangyouxiayiye size26"></text>
			</view>
		</view>

		<u-popup :show="show" :round="10" closeable @close="show = false">
			<view>
				<view class="size32 color_33 padding30">送达时间</view>
				<view class="content">
					<scroll-view class="left height" scroll-y>
						<view class="date size26" :class="{'active': current == index}" @click="changeDay(index)" 
							v-for="(item,index) in pageData" :key="index">{{ item.title }}</view>
					</scroll-view>
					<scroll-view class="flex-1 height" scroll-y v-if="pageData[current]">
						<view class="time size26" :class="{'active': time == item}" @click="time = item" 
							v-for="(item,index) in pageData[current].list" :key="index">{{ item }}</view>
					</scroll-view>
				</view>
				<view class="btn flexac size28 white" @click="confirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				show: false,
				pageData: [],
				current: 0,
				time: '',
				deliveryTime: ''
			}
		},
		computed: {
			...mapState(['color'])
		},
		created() {
			this.getTime()
		},
		methods: {
			getTime() {
				this.$http.post({
					url: '/zzj_singleSaleApi/getSystemDeliveryTime'
				}).then(res => {
					if(res.errcode != 100) return this.$Toast(res.msg)
					this.pageData = res.data || []
					if(this.pageData.length) this.time = this.pageData[0].list[0] || ''
				})
			},
			changeDay(index) {
				this.current = index
				let item = this.pageData[this.current]
				this.time = item.list[0] || ''
			},
			confirm() {
				if(!this.time) return this.$Toast('请选择具体送达时间')
				let item = this.pageData[this.current]
				this.deliveryTime = item.title + this.time
				this.$emit('getDeliveryTime', item.day + this.time)
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 710rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx 24rpx;
		margin: 20rpx auto 0;
	}
	.content {
		height: 40vh;
		display: flex;
		.left {
			width: 270rpx;
			background: #f2f2f2;
			.date {
				padding: 28rpx 0;
				text-align: center;
				&.active {
					background: #fff;
					font-weight: bold;
				}
			}
		}
		.time {
			height: 90rpx;
			line-height: 90rpx;
			border: 2rpx solid #eaeaea;
			border-radius: 10rpx;
			overflow: hidden;
			padding-left: 30rpx;
			margin: 0 30rpx 10rpx;
			&.active {
				border: 2rpx solid var(--color);
				color: var(--color);
				position: relative;
				&::after {
					content: '';
					width: 100%;
					height: 100%;
					background: var(--color);
					opacity: 0.08;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
	.btn {
		width: 690rpx;
		height: 70rpx;
		background: var(--color);
		border-radius: 10rpx;
		margin: 20rpx auto;
	}
</style>